<template>
  <div class="section-two" ref="parent">
    <!-- <div class="border-row"></div>
    <div class="border-col"></div> -->
    
    <div class="section-header-two">活跃用人单位园区分布</div>
    <div ref="charts" :style="chartsDom" v-show="jz"></div>
    <animae-jz  :style="chartsDom" v-if="!jz"></animae-jz>
  </div>
</template>
<script>
import { enterpriseCenus } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      chartData: null,
      jz:true
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 10 + 'px',
        height: this.height-10 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.$nextTick(_=>{
        this.init()
    })
  },
  methods: {
    init(){
      this.jz=false
      enterpriseCenus(this.dateProp).then(({data:{data}})=>{
        this.jz=true
        let lis=[]
        let dis=[]
        data.forEach(item=>{
          lis.push(item.value)
          dis.push(item.name)
        })
        this.drawCharts(lis,dis)
      })
    },
      drawCharts(lis,dis) {
          let option = {
                color:['#87CEFF'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '10%',
                    bottom: '10%',
                    top:'5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
              show: false
                },
                yAxis: {
                    type: 'category',
                   axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                color: 'rgba(255, 255, 255, 1)'
              },
                    data: dis.reverse()
                },
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        data: lis.reverse(),
                        itemStyle: {
                            barBorderRadius:[0,15,15,0],
                            color: new this.$echarts.graphic.LinearGradient(
                                0, 0, 1, 0,
                                [
                                    {offset: 0, color: '#2a8ad0'},                   //柱图渐变色
                                    {offset: 1, color: '#3af3ce'},                   //柱图渐变色
                                ]
                            )
                          },
                          label: {
                          show: true,
                          position: 'right',
                          color: 'rgba(255, 255, 255, 1)',
                          formatter: params => {
                            return `${params.value}家`
                          }
                        },
                    }
                ]
            };
            let chartsInit = this.$echarts.init(this.$refs.charts);
            chartsInit.setOption(option);

      }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
    margin-top 20px;
</style>